<template>
    <div id="drawProcessDesign">
        <a-button @click="getData">提交</a-button>
        <a-button @click="createProduct">创建产成品</a-button>
        <FactoryDrawFlow
                @clickNode="clickNode"
                @clickSelectBox="clickSelectBox"
                ref="flow"
                :FlowConfig="FlowConfig"
                :ProcessData="ProcessData">
        </FactoryDrawFlow>

        <a-modal
                :title="modalTitle"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel">
            <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
                <a-form-model-item label="工序选择" prop="process">
                    <a-select v-model="form.process.route_id" placeholder="please select your process">
                        <a-select-option value="2811">
                            30/50锻打
                        </a-select-option>
                        <a-select-option value="2812">
                            4V39S系列
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="工序">
                    <a-input v-model="form.name" />
                </a-form-model-item>
                <a-form-model-item label="Instant delivery">
                    <a-switch v-model="form.delivery" />
                </a-form-model-item>
            </a-form-model>
        </a-modal>

    </div>
</template>
<style lang="less" scoped>
    #drawProcessDesign {
        background: #f0f2f5;
    }
</style>

<script>

    export default {
        name: "Home",
        components: {},
        data() {
            return {
                FlowConfig: [
                    {
                        id: "root",
                        groupId: null,
                        type: "1",
                        title: "钢丝绳类",
                        content: "航空钢丝绳",
                        isRow: true,
                        isRoot: true,
                        data: {}
                    }
                ],
                // 子组件点击流程之后，触发顶层组件的响应事件，以供用户选择及填充信息
                ProcessData: {
                    // 当前工艺流程信息是否已经完成填充
                    finished: false,
                    data: {
                        process: {
                            stage_id: "",   // 工序流程所属的阶段id（代码）
                            route_id: "",   // 工序流程的id（代码）
                            stage: "",      // 工序流程所属阶段
                            route: "",      // 工序流程},
                        }
                    }
                },

                //************* 以下为对话框Modal的数据 *************//
                visible: false,
                confirmLoading: false,
                modalTitle: "Title",

                //************ 以下为表单FormModal的数据 ************//
                labelCol: { span: 7 },
                wrapperCol: { span: 14 },
                form: {
                    name: '',
                    process: {
                        stage_id: "",   // 工序流程所属的阶段id（代码）
                        route_id: "",   // 工序流程的id（代码）
                        stage: "",      // 工序流程所属阶段
                        route: "",      // 工序流程
                    },
                    delivery: false,
                },
                rules: {
                    process: [{required: true, message: 'Please select your process', trigger: 'change'}],
                },
                //************************************************//

                // 当前的流程选项卡
                selectItem: null,
                // 点击流程选项卡属于哪一个节点
                belongNode: null,
            };
        },
        created() {
            this.init();
        },
        methods: {
            // 将用户的填充信息进行打包，准备发送
            finishProcess() {
                this.ProcessData.finished = true;
                this.form.process.route = "30/50锻打";
                this.ProcessData.data.process = this.form.process;
            },

            // 清空当前流程数据
            clearProcessData() {
                this.ProcessData.finished = false;
                this.ProcessData.data = {};
            },

            handleOk() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        // 工序选择完成
                        this.finishProcess();
                        // 通知子组件
                        this.$refs['flow'].$emit("selectFinished", this.selectItem, this.belongNode);
                        this.visible = false;
                    }
                });
            },

            handleCancel(e){
                this.clearProcessData();
                // 通知子组件
                this.$refs['flow'].$emit("selectFinished", this.selectItem, this.belongNode);
                this.visible = false;
            },


            getData() {
                console.log(this.$refs.flow);
                let res = this.$refs.flow.getResData();
                console.log("这是返回的一维数组", res);
            },

            getNodeArr() {
                this.FlowConfig = this.$refs.flow.getNodeArr();
                return this.FlowConfig;
            },

            init() {
                // this.FlowConfig = this.transform(this.FlowConfig);
            },

            // 创建一件产品（即根节点）
            createProduct(){

            },

            // 点击节点触发响应函数
            clickNode(node) {
                console.log(node)
                // this.visible = true;
            },

            // 子组件add-box点击选项卡触发
            clickSelectBox(selectItem, belongNode) {
                // 选项卡信息做处理
                this.selectItem = selectItem;
                this.belongNode = belongNode;
                // 更换 Modal 的title
                this.modalTitle = selectItem.value;
                // 显示对话框
                this.visible = true;
            }
        }
    };
</script>
